<template>
  <div>
    <el-card>
		
		<el-row type="flex">
		  <HButton type="add" @click="add">自定义角色</HButton>
		</el-row>
      <!-- 表格 -->
      <el-table class="mt-20" :data="tableData" border stripe>
        <el-table-column prop="id" label="角色编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="角色名称" align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200px"
        >
          <template slot-scope="scope">
            <HButton @click="edit(scope.row)" type="update" size="mini"
              >权限</HButton
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
	
	<addDia ref="addDia" @transData="transData"></addDia>
	
    <editDia ref="editDia" @transData="transData"></editDia>
  </div>
</template>

<script>
import editDia from "./components/role-edit";
import { getAllRole } from "@/api/family_doctor/family_doctor";
import addDia from "./components/role-add";
export default {
  components: { editDia,addDia },
  data() {
    return {
      data: {},
      tableData: [],
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      getAllRole().then((res) => {
        this.tableData = res.data;
      });
    },
    edit(scope) {
      this.$refs.editDia.openDialog(scope);
    },
    transData() {},
	//添加
	add() {
	  this.$refs.addDia.openDialog(true);
	},
  },

};
</script>